<template>
	<view class="flex flex-wrap justify-between">
		<view class="p-20 mb-20 bg-white" :style="{ width: width }" v-for="item in list" :key="item.id">
			<video class="video" id="myVideo"
				:src="item.videoSrc || 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'"
				:controls="false" muted loop @click="videoClick(item.id)" @error="videoErrorCallback"></video>
			<view class="name mb-10 font-22"> {{ item.name }} </view>
			<view class="action">
				<PsyShowAndLike />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => [],
			},
			width: {
				type: String,
				default: '100%',
			},
			text: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				list: [{
						id: 1,
						name: '如何让宝宝克制看电视',
						videoSrc: ''
					},
					{
						id: 2,
						name: '示例视频2',
						videoSrc: ''
					},
					{
						id: 3,
						name: '示例视频3',
						videoSrc: ''
					},
				],
			}
		},
		methods: {
			videoClick(id) {
				uni.navigateTo({
					url: `/detail/video/video?id=${id}`
				});
			},
			videoErrorCallback(error) {
				console.error('视频播放错误:', error);
			},
		},
		watch: {
			data: {
				handler(newValue) {
					this.list = newValue.map((item, index) => ({
						...item,
						id: index + 1, // 确保每个项目的id唯一
					}));
				},
				immediate: true, // 初始化时立即执行
				deep: true, // 深度监听
			},
		},
	}
</script>

<style scoped>
	.video {
		width: 100%;
		height: 300rpx;
	}

	.name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>